<template>
  <div class="payment-page">
    <div class="card">
      <div class="card-header">
        <div>绿色通道申请</div>

      </div>
      <div class="card-body">
        <!-- 告知书部分 -->
        <div class="notice">
          <h3 style="text-align: center">系统告知书</h3>
          <p>尊敬的同学：</p>
          <p>您好！</p>
          <p>为了确保您能够顺利申请绿色通道，请您仔细阅读以下告知内容，并按照要求进行操作：</p>
          <h4>一、绿色通道申请条件</h4>
          <ol>
            <li>家庭经济困难，无法按时缴纳学费的学生；</li>
            <li>遭遇突发事件，导致经济状况急剧恶化的学生；</li>
            <li>其他特殊原因导致经济困难的学生。</li>
          </ol>
          <h4>二、申请所需材料</h4>
          <ul>
            <li>绿色通道申请表（请在系统中下载并填写）；</li>
            <li>家庭经济困难证明（如低保证、贫困证明等）；</li>
            <li>本人身份证复印件；</li>
            <li>学生证复印件；</li>
            <li>其他能够证明经济困难的材料。</li>
          </ul>
          <h4>三、申请流程</h4>
          <ol>
            <li>登录学校官方网站或绿色通道申请系统；</li>
            <li>下载并填写《绿色通道申请表》；</li>
            <li>准备所需材料的电子版并上传至系统；</li>
            <li>提交申请后，系统将自动生成申请编号，请妥善保存；</li>
            <li>等待审核结果，审核期间请保持联系方式畅通，以便及时接收通知。</li>
          </ol>
          <h4>四、审核与结果通知</h4>
          <ol>
            <li>申请提交后，学校将组织相关部门进行审核；</li>
            <li>审核过程中，如需补充材料或信息，工作人员将通过电话或邮件联系您；</li>
            <li>审核结果将在提交申请后的10个工作日内通过系统通知，请登录系统查看。</li>
          </ol>
          <h4>五、重要提醒</h4>
          <ul>
            <li>请确保提交的材料真实、完整，如有虚假，申请将被取消，且将依规处理；</li>
            <li>绿色通道申请成功后，请按照通知要求办理相关手续；</li>
            <li>如有疑问，请及时联系学校绿色通道办公室，电话：XXX-XXXXXXX，邮箱：greentunnel@school.edu。</li>
          </ul>
          <p>感谢您的配合！</p>
          <p>祝学习愉快！</p>
        </div>
        <div style="text-align: center">
          <button  @click="changeGreen">申请</button>
        </div>
      </div>
    </div>
  </div>
</template>


<style scoped>
.payment-page {
  padding: 20px;
  background-color: #f9f9f9;
}

.card {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  border-radius: 8px;
}

.card-header {
  background-color: #409eff;
  color: #fff;
  border-bottom: 1px solid #ddd;
  padding: 10px 20px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  border-radius: 8px 8px 0 0;
}

button {
  padding: 10px 20px;
  background-color: #409eff;
  border: none;
  color: #fff;
  cursor: pointer;
  border-radius: 5px;
}
button:hover {
  background-color: #66b1ff;
}
</style>

<script>
import request from "@/utils/request";
import {Message} from "element-ui";
import userManager from "@/UserManager";
export default {
  name: 'greenChannel',
  data(){
    return{
      //id
      stu_ID: userManager.getUserId(),
      error: '', // 确保定义 error 属性
    };
  },
  methods:{
    changeGreen(){
      const cgGreen = {
        stu_ID: this.stu_ID
      }
      request.post("/regis/green", cgGreen)
          .then(res => {
            console.log(res.data);
            Message.success({
              message: '申请成功',
              duration: 3000
            });
          })
          .catch(err => {
            this.showError('操作失败，请稍后再试'); // 显示具体错误信息
            console.error("Network error:", err); // 处理网络错误
          });
    },
    showError(str){
      // 触发错误提示
      Message.error({
        message: str,
        duration: 3000 // 持续时间为3000毫秒（3秒）
      });
    },
  }
};
</script>
